<template>
	<view class="evaluate">
		<view class="tabBox">
			<view class="tabList" :class="actions == index && 'tabActive'" v-for="(item, index) in tab" :key="index"
				@click="tabClick(index, item.tag)">
				<view class="tabTitle">{{ item.title }}
					<span class="tabLine" v-if="item.num">{{ item.num }}</span>
				</view>
			</view>
		</view>
		<view class="listBox" v-for="item in list ">
			<view class=" listBox_item">
				<view class="listBox_user">
					<image class="listBox_user_img" :src="baseUrl + item.user.avatar" mode="aspectFill" />
					<view class="listBox_user_name">{{ item.user.nickname }}</view>
					<view class="listBox_user_sapn">黄金会员 </view>
				</view>
			</view>
			<view class="listBox_content">
				<view class="listBox_content_star">
					<view class="listBox_content_star_item">
						<van-rate v-model="item.score" gutter="0" readonly size="15" color="#FF6200" void-icon="star"
							void-color="#eee" />
					</view>
					<view class="listBox_content_star_content">
						已购：{{ item.suk }}
					</view>
					<view class="listBox_content_star_tims">{{ item.updatetime }}</view>
				</view>
				<view class="listBox_content_text">
					{{ item.content }}
				</view>
				<view class="listBox_content_iamges">
					<image class="listBox_content_iamges_img" :src="baseUrl + item.images"
						@tap="onTap(baseUrl + item.images)" mode="aspectFill" />
				</view>
			</view>
		</view>
		<van-empty description="暂无评论 " v-if="list.length == 0" />

		<van-goods-action>
			<van-goods-action-icon icon="shop-o" text="店铺"
				@click="navTo(`/pages/storeDetails/sotreDetails/sotreDetails?id=${item.shop_id}`)" />
			<button class="contact-button" type="default" plain="true" open-type="contact">

				<van-goods-action-icon icon="chat-o" text="客服" />
			</button>
			<van-goods-action-icon icon="star" color="#E9B422" text="收藏" @click="onClickCollect()" v-if="collectShow" />
			<van-goods-action-icon icon="star-o" text="收藏" @click="onClickCollect()" v-else />
			<van-goods-action-button text="加入购物车" type="warning" @click="onClickShow()" />
			<van-goods-action-button text="立即购买" @click="onClickShow()" />
		</van-goods-action>
	</view>
</template>

<script>
import shopping from "@/components/productDetail/shopping.vue"
import { getGoodsCommentList, collectGoods } from '@/api/api';
import baseUrl from '@/api/baseUrl';
import {
	mapState, mapMutations
} from 'vuex';
export default {
	components: {
		shopping
	},
	data() {
		return {
			baseUrl,
			tab: [
				{
					title: "全部",
					num: "",
					tag: ""
				},
				// {
				// 	title: "最新",
				// 	num: ""
				// },
				{
					title: "图片",
					num: "",
					tag: 'figure'
				},
				{
					title: "好评",
					num: "",
					tag: 'good'
				},
				{
					title: "中评",
					num: "",
					tag: 'pertinent'
				},
				{
					title: "差评",
					num: "",
					tag: 'poor'
				},
			],
			actions: 0,
			value: 5,
			list: [],
			yxshow: false,
			tag: '',
			id: '',
			latitude: '',
			longitude: '',
			shopList: [],
			collectShow: false
		}
	},
	computed: {
		...mapState('commodity', ['item', 'selected']),
	},
	onLoad(options) {
		this.id = options.id
		this.longitude = options.longitude || '113.38'
		this.latitude = options.latitude || '22.94'
		this.commentList()

	},
	methods: {
		commentList() {
			let data = {
				goods_id: this.id,
				tag: this.tag
			}
			getGoodsCommentList(data).then(res => {
				if (res.code == 1) {
					this.list = res.data.comment.data
					this.tab[0].num = res.data.comment.total || 0
					this.tab[1].num = res.data.comment.figure || 0
					this.tab[2].num = res.data.comment.good || 0
					this.tab[3].num = res.data.comment.pertinent || 0
					this.tab[3].num = res.data.comment.poor || 0
				}
			})

		},
		store() {
			let data = {
				shop_id: this.item.shop_id,
				longitude: this.longitude,
				latitude: this.latitude
			}
			getStoreList(data).then(res => {
				if (res.code == 1) {
					this.shopList = res.data
				}
			})
		},
		onClickShow() {
			let pages = getCurrentPages()
			// 2. 上一页面实例
			// 注意是length长度，所以要想得到上一页面的实例需要 -2
			// 若要返回上上页面的实例就 -3，以此类推
			let prevPage = pages[pages.length - 2]
			prevPage.$vm.onClickShow('yxshow')

			// 4. 返回上一页面
			uni.navigateBack({
				delta: 1 // 返回的页面数
			})

		},
		// 收藏
		onClickCollect() {
			collectGoods({
				goods_id: this.item.id
			}).then(res => {
				uni.showToast({
					title: res.code == 1 ? (res.data ? '收藏成功' : '取消收藏') : res.msg,
					icon: res.code == 1 ? 'success' : 'none'
				})
				if (res.code == 1) {
					this.collectShow = res.data
				}
			})
		},

		tabClick(index, tag) {
			this.actions = index
			this.tag = tag
			this.commentList()
		},
		onChange(value) {
			this.value = value
		},
		onTap(item) {
			uni.previewImage({
				urls: [item]
			})
		},
		onClickIcon() {

		},
		onClickButton() {

		}
	}
}
</script>

<style scoped lang="scss">
.evaluate {
	padding: 30upx 30upx 180upx 30upx;
}

.tabBox {
	display: flex;
	word-wrap: break-word;
}

.contact-button {
	margin: 0;
	padding: 0;
	border: 0 !important;
	border-radius: 0;
}

.tabList {
	// display: flex;
	padding: 10upx 20upx;
	background-color: #fff;
	border-radius: 50upx;
	margin: 0 10upx;
	justify-content: center;
	align-items: center;
	box-shadow: 0px 1px 2px 0px rgba(205, 205, 205, 0.3316);

	.tabTitle {
		font-size: 26upx;
		color: #333333;
	}

	.tabLine {
		font-size: 26upx;
		color: #5C5C5C;
		margin-left: 10upx;
	}
}

.tabActive {
	box-sizing: border-box;
	border: 1px solid #359BEF;

	.tabTitle {
		color: #359BEF !important;
	}
}

.listBox {
	margin-top: 20upx;
}

.listBox_item {
	margin: 20upx 0;
}

.listBox_user {
	display: flex;
	align-items: center;
	column-gap: 20upx;

	.listBox_user_img {
		width: 73upx;
		height: 73upx;
		border-radius: 50px;
	}

	.listBox_user_name {
		font-size: 30upx;
		font-family: PingFang SC;
		color: #333333;
	}

	.listBox_user_sapn {
		font-size: 20upx;
		padding: 3upx 10upx;
		font-weight: normal;
		color: #fff;
		border-radius: 6px 6px 100px 6px;
		background: linear-gradient(103deg, #F69700 -8%, #EB5E00 100%);
	}
}

.listBox_content {
	padding: 21upx 26upx;
	margin-top: 10upx;
	border-radius: 15px;
	background: #FFFFFF;
	box-shadow: 0px 2px 8px 0px rgba(205, 205, 205, 0.5);

	.listBox_content_star {
		display: flex;
		align-items: center;
		column-gap: 15upx;

		.listBox_content_star_content {
			font-size: 20upx;
			font-weight: normal;
			color: #5C5C5C;
			max-width: 300upx;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}

		.listBox_content_star_tims {
			font-size: 22upx;
			color: #5C5C5C;
		}
	}

	.listBox_content_text {
		font-size: 28upx;
		color: #333333;
		font-weight: normal;
		line-height: normal;
		margin: 15upx 0;
	}

	.listBox_content_iamges {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		grid-gap: 15upx;

		.listBox_content_iamges_img {
			width: 210upx;
			height: 210upx;
			border-radius: 10px;
		}
	}
}
</style>